<template>
<!-- 左边文件分享列表页面 -->
    <div>
        <div class="top">
            <el-button type="primary" :disabled="selectIdList.length == 0" @click="cancelShareBatch">
                <span class="iconfont icon-cancel"></span>
                取消分享
            </el-button>
        </div>
        <div class="file-list">
            <Table
              ref="dataTableRef"
              :columns="columns"
              :dataSource="tableData"
              :fetch="loadDataList"
              :initFetch="true"
              :options="tableOptions"
              @rowSelected="rowSelected">
              <!-- #fileName 与 定义的columns.scopedSlots有关 -->
              <template #fileName="{ index, row }">
                <!-- @mouseenter：鼠标悬停时，  @mouseleave：鼠标离开时 -->
                <div class="file-item" @mouseenter="showOp(row)" @mouseleave="cancelShowOp(row)">
                    
                    <!-- 展示预览封面 -->
                      <!-- 判断该项是否为视频或者图片，并转码成功 -->
                      <template v-if="(row.fileType == 1 || row.fileType == 3) && row.status == 2">
                        <!-- 传递封面给子组件 Icon.vue -->
                        <Icon :cover="row.fileCover" :width="55"></Icon>
                      </template>                    
                      <!-- 如果该项不是视频或图片，则 -->
                      <template v-else>
                        <!-- 判断为文件，则传递文件的类型给子组件，并匹配封面 -->
                        <Icon v-if="row.folderType == 0" :fileType="row.fileType"></Icon>
                        <!-- 判断为目录，则传递参数0给子组件 -->
                        <Icon v-if="row.folderType == 1" :fileType="0"></Icon>
                      </template>

                      <!-- 展示文件名 -->
                      <span class="file-name" :title="row.fileName">{{ row.fileName }}</span>

                      <span class="op">
                        <!-- 操作按钮 -->
                      <template v-if="row.showOp">
                        <span class="iconfont icon-link" @click="copy(row)">复制链接</span>
                        <span class="iconfont icon-cancel" @click="cancelShare(row)">取消分享</span>
                      </template>
                      </span>
                </div>
              </template>

              <!-- 失效时间 (#fileName 与 定义的columns.scopedSlots有关 ) -->
              <template #expireTime="{ index, row }">
                {{ row.validType == 3 ? "永久" : row.expireTime }}
              </template>
            </Table>
        </div>
    </div>
</template>
<script setup>
import useClipboard from "vue-clipboard3";     //读取剪切板内容，依赖下载在package.json第27行
const { toClipboard } = useClipboard();        //往剪切板写入
import { ref, reactive, getCurrentInstance, nextTick, onMounted, computed } from "vue";
const { proxy } = getCurrentInstance();

//请求定义
const api = {
    loadDataList: "/share/loadShareList",            //获取分享文件列表   
    cancelShare: "/share/cancelShare",               //删除分享文件
};

const columns = [
    {
        label: "文件名",
        prop: "fileName",
        scopedSlots: "fileName",
    },
    {
        label: "分享时间",
        prop: "shareTime",
        width: "200",
    },
    {
        label: "失效时间",
        prop: "expireTime",
        scopedSlots: "expireTime",
        width: "200",
    },
    {
        label: "浏览次数",
        prop: "showCount",
        width: "200",
    },
]

const shareUrl = ref(document.location.origin + "/share/"); //分享链接（后面需加上shareId）
const showLoading = ref(true);     //是否开启 等待响应时的样式
const tableData = ref({});         //文件列表
const tableOptions = {
    extHeight: 20,
    selectType: "checkbox",
};


/**
 * 搜索
 */
const search = () => {
    showLoading.value = true;
    loadDataList();
};

/**
 * 请求列表
 */
const loadDataList = async () => {
    let params = {
        pageNo: 1,
        pageSize: 10,
    };

    //发送请求
    let result = await proxy.Request({
        url: api.loadDataList, //获取数据列表
        showLoading: showLoading.value,
        params: params,
        dataType: 'json',      //以json形式发送参数（默认是以文件形式）如不设置dataType，则后端无需使用@RequestBody接收对象
    });

    if (!result) {
        return;
    };
    tableData.value = result.data.shareList;
};


const selectIdList = ref([]);    //被选中的行列
//多选 由子组件Table.vue的handelSelectionChange方法调用
const rowSelected = (rows) => {
    selectIdList.value = [];
    rows.forEach((item) => {
        selectIdList.value.push(item.shareId);   //添加
    });
};


//鼠标悬停时，展示操作按钮
const showOp = (row) => {
    //遍历数据集，给每项赋于属性showOp，用于控制操作按钮
    tableData.value.list.forEach((element) => {
        element.showOp = false;
    });
    row.showOp = true;    //当前项为被鼠标选中，展示操作按钮
};


//鼠标离开时，隐藏操作按钮
const cancelShowOp = (row) => {
    row.showOp = false;
};


/**
 * 批量取消分享
 */
const cancelShareBatch = () => {
    if (selectIdList.value.length == 0) {
        return;
    }
    proxy.Confirm(`你确定要取消分享吗？`, async () => {
        let result = await proxy.Request({
            url: api.cancelShare,
            params: { shareIds: selectIdList.value.join(",") },//将数组中所有的元素合并为一个字符串，元素之间通过指定字符进行分隔
        });
        if (!result) {
            return;
        }
        proxy.Message.success("取消分享成功");
        loadDataList();
    })
};


/**
 * 单个取消分享
 */
const cancelShare = (row) => {
    proxy.Confirm(`你确定要取消分享吗？`, async () => {
        let result = await proxy.Request({
            url: api.cancelShare,
            params: { shareIds: row.shareId },//将数组中所有的元素合并为一个字符串，元素之间通过指定字符进行分隔
        });
        if (!result) {
            return;
        }
        proxy.Message.success("取消分享成功");
        loadDataList();
    })
}


/**
 * 复制按钮
 */
const copy = async (data) => {
    //将内容往剪切板中写入
    await toClipboard(`链接:${shareUrl.value}${data.shareId} 提取码:${data.code}`); 
    proxy.Message.success("复制成功");
}

</script>
<style lang="scss" scoped>
@import "@/assets/file.list.scss";
.file-list {
    margin-top: 10px;
    .file-item {
        .file-name {
            span {
                &:hover {
                    color: #494944;
                }
            }
        }
        .op {
            width: 150px;
        }
    }
}

</style>